<template>
  <div>
    <!-- 创建导航栏，左侧有一个按钮用于触发侧边导航栏的显示 -->
    <van-nav-bar @click-left="back()" fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
      <template #title>
        {{ titlename }}
      </template>
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="add" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-action-sheet v-model="show" :actions="actions2" @select="onSelect2" />
    <van-action-sheet v-model="show2" :actions="actions3" @select="onSelect3" />
    <!-- 内容区域 -->
    <!-- <form action="/">
      <van-search
        v-model="value"
        placeholder="搜索成员"
        input-align="center"
        shape="round"
        style="margin-top: 48px"
        @search="onSearch1()"
      />
    </form> -->
    <!-- <van-dialog v-model="showbui" title="重置分数会清空所有成员的分数，确定重置吗？" @confirm="test666" show-cancel-button></van-dialog> -->
  
  </div>
</template>
    
    <script>
import axios from "axios";
// import { EventBus } from '../../eventbus';
export default {
  data() {
    return {
      value: "",
      showbui: false,
      show2: false,
      titlename: "坚毅不倒！！！",
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "成员导入", value: "memberImport" },
        { text: "初始化分数", value: "memberManage" },
        { text: "成绩导出", value: "outputGrade" },
        { text: "删除班级", value: "deleteClass" },
      ],
      show: false,
      actions2: [
        { name: "选择导入", value: "selectImport" },
        { name: "文件导入", value: "fileImport" },
      ],
      actions3: [
        { name: "导出总分数", value: "AllGrade" },
        { name: "导出分数明细", value: "detailGrade" },
      ],
    };
  },
  methods: {
    onSearch1() {
      console.log(this.value);
    },
    ToCreateCourse() {
      this.$router.push("/CreateCourse");
    },
    back() {
      this.$router.go(-1);
    },
    // onSelect(action) {
    //   this.show = true;
    // },
    onSelect(action) {
      if (action.value === "memberImport") {
        this.show = true;
      }
      if (action.value === "memberManage") {
        // this.showbui = true;
        this.test666();
      }
      if (action.value === "outputGrade") {
        this.show2 = true;
      }
      if (action.value === "deleteClass") {
        this.$dialog.confirm({
          title: "删除班级",
          message: "删除班级会清除所有答辩记录，确定删除吗？(此操作不可恢复)",
        })
         .then(() => {
            axios.delete("/class/deleteClass?classId=" + this.$route.params.id).then((response) => {
              console.log(response);
              this.$message.success("删除班级成功");
              this.$router.push("/Class");
            });
          })
         .catch(() => {
            console.log(777);}
        );
      }
    },
    onSelect2(action) {
      if (action.value === "selectImport") {
        this.$router.push("/SelectImport/" + this.$route.params.id);
      }
      if (action.value === "fileImport") {
        const input = document.createElement("input");
        input.type = "file";
        input.enctype = "multipart/form-data";
        input.click();

        input.addEventListener("change", function () {
          // 处理选择文件后的逻辑
          // 创建一个 FormData 对象
          const file = new FormData();
          file.append("file", input.files[0]); // 将文件添加到 file 中
          axios
            .post("/class/importbyex", file, {
              Headers: {
                "Content-Type": "application/octet-stream",
              },
            })
            .then((response) => {
              console.log(response);
            })
            .catch((error) => {
              console.log(error);
            });
        });
      }
    },

    onSelect3(action) {
  if (action.value === "AllGrade") {
    axios.get("/scores/exportData?classId=" + this.$route.params.id, {
      responseType: 'blob',  // 设置响应类型为 blob
    }).then((response) => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', this.$route.params.titlename + '总分数.xlsx');  // 设置文件名
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);  // 释放 URL 对象
      document.body.removeChild(link);
    });
  }
  if (action.value === "detailGrade") {
    axios.get("/scores/exportDataDetails?classId=" + this.$route.params.id, {
      responseType: 'blob',  // 设置响应类型为 blob
    }).then((response) => {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', this.$route.params.titlename + '分数明细.xlsx');  // 设置文件名
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);  // 释放 URL 对象
      document.body.removeChild(link);
    });
  }
},

    updateTitle(newTitle) {
      this.titlename = newTitle;
      this.$forceUpdate();
    },

    test666(){
      this.$dialog.confirm({
  title: '初始化分数',
  message: '初始化分数会清空所有成员的分数，确定初始化吗吗？',
})
  .then(() => {
    console.log(this.$store.state.course_id);
    console.log(parseInt(this.$route.params.id));
    if(this.$store.state.course_id == 0){
      this.$message.error("请先加入课程");
    }else{
    axios.post("/class/importGradeStudent?classId="+
      parseInt(this.$route.params.id)+"&courseId="+
      this.$store.state.course_id,
     ).then((response) => {
      // console.log(response);
      this.$message.success("初始化分数成功");
    })
    }})
  .catch(() => {
    console.log(777);
  });
    }
  },
  mounted() {
    this.updateTitle(this.$route.params.titlename);
    // console.log(this.$route.params.titlename);
    // console.log(this.$store.state.username);
  },
};
</script>
    
    
    <style scoped>
.blue-text {
  color: skyblue;
}

.red-text {
  color: rgb(116, 193, 0);
}

.search-btn {
  margin-left: 10%;
  margin-top: 10%;
  width: 80%;
  position: absolute;
  bottom: 20%;
}

.img-icon {
  height: 20px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* flex:1; */
}

.flex-item {
  flex: 1;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: border-color 0.3s;
  cursor: pointer;
}

/* 复选框标记的样式 */
input[type="checkbox"]:checked::before {
  content: "✔"; /* 选中后显示✔符号 */
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: white;
  border-radius: 50%; /* 使复选框变成圆形 */
  transition: border-color 0.3s;
  background-color: rgb(70, 175, 240); /* 选中后的背景色 */
  cursor: pointer;
}

input[type="checkbox"]:checked::after {
  display: none; /* 显示 ✔ 符号 */
}
</style>